<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拦截器</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
    <button>测试拦截器</button>
    <script>
        //设置基本路径和超过时间
        const request = axios.create({
            baseURL : 'http://localhost:3015',
            timeout:30000
        })

        //添加请求拦截器
        request.interceptors.request.use((config)=>{
            //1.所有请求都携带一个特定的请求头
            config.headers['token']='atguigu'
            //2.所有请求发出去前打印一个日志输出
            console.log('请求',Date.now(),config.url);

            return config //必须返回config
        })


        //添加响应拦截器
        request.interceptors.response.use(
            response=>{
                
                return response.data

            },error=>{
                alert('请求错误:'+ error.message)

                throw error
            }
            )


            const btn = document.querySelector('button')

            btn.onclick = function(){
                request({
                    url:'delay-server/123',
                    method:'post',
                    params:{a:1,b:2},
                    data:{c:3,d:4}
                }).then(
                    response=>{
                        console.log('具体请求的成功回调',response);
                    },
                    error=>{
                        console.log('具体请求的失败回调',error);
                    }
                )
            }

            /* 
            1.请求拦截器回调
            2.发请求
            3.响应拦截器回调
            4.具体请求的回调
            */
        //    四个任务串连执行 =>promise的then的链式调用
        // axios(config)
        //    - Promise.resolve(config) // 创建value为config的成功promise
        //    - 利用.then()串连执行上面的4个任务

        // Promise.resovle(config)
        //     .then(
        //         (config) =>{
        //             return config // 必须返回它 => 要交给发请求的回调
        //         },
        //         (error)=>{}
        //     )
        //     .then(
        //         (config)=>{
        //             return new Promise((resovle,reject)=>{
        //                //根据config来创建并配置xhr对象,发送ajax请求
        //                //如果成功了,
        //                 //创建一个数据对象作为value:response = {data:JSON.parse(xhr.responseText),statusText} 
        //                 //调用resolve(response)
        //                 //如果失败了
        //                 //创建一个数据对象为reason:error= new Error('request error status='+ xhr.status)
        //             })  
        //         }
        //     )
        //     .then(
        //         response =>{
                    
        //             return response //默认
        //             return response.data //具体请求的成功回调得到的就是响应体数据
        //         },
        //         error=>{
        //             throw error
        //             return Promise.reject(error)
        //         }
        //     )//响应拦截器
        //     .then(
        //         value =>{//默认是response,但修改是response.data

        //         },error=>{

        //         }
        //     )//具体请求回调


    </script>
</body>
</html>